<template name="trailerStars">
	<view class="movie-score-wapper">
		<!-- 除微信小程序 其它平台均存在的代码-->
		<!-- #ifndef MP-WEIXIN -->
			<image v-for="(yero,yeroindex) in yeroScore"  src="../../static/icos/star-yellow.png" class="star-ico"></image>
			<image v-for="(gray,grayindex) in grayScore"   src="../../static/icos/star-gray.png" class="star-ico"></image>
		<!-- #endif -->
		
		<!-- 仅在微信小程序上编译 -->
		<!-- #ifdef MP-WEIXIN -->
			<image v-for="(yero,yeroindex) in yeroScore" :key="yeroindex" src="../static/icos/star-yellow.png" class="star-ico"></image>
			<image v-for="(gray,grayindex) in grayScore" :key="grayindex"  src="../static/icos/star-gray.png" class="star-ico"></image>
		<!-- #endif -->
		
		
		<view class="movie-score" v-if="showNum == 1">
			{{innerScore}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"trailerStars",
		data() {
			return {
				yeroScore:0,//默认黄色分数
				grayScore:5, //分数灰色分数
			}
		},
		props:{
			innerScore:0, //定义外部传入的分数
			showNum:0 //是否需要显示具体的分数 1：显示 2：不显示
		},
		methods: {
			
		},
		//生命周期，组件创建完成后被调用
		created() {
			let tempScore = 0;
			if(this.innerScore != null && this.innerScore != "" && this.innerScore != undefined){
				tempScore = this.innerScore*1;
			}
			let yeroScore = parseInt(tempScore / 2);//黄色分数
			let grayScore = 5 - yeroScore;//灰色分数
			
			this.yeroScore = yeroScore;
			this.grayScore = grayScore;
		}
	}
</script>

<style>
	.movie-name{
		width: 200upx;
		margin-top: 10upx;
		font-weight: bold;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.movie-score-wapper{
		display: flex;
		flex-direction: row;
	}
	.star-ico{
		width: 20upx;
		height: 20upx;
		margin-top: 6upx;
	}
	.movie-score{
		font-size: 12px;
		color: grey;
		margin-left: 8upx;
	}
</style>
